<template>
  <div id="modify">
    <div class="bgc">
      <van-row>
        <van-col span="24">
          <van-nav-bar title="修改用户信息" left-arrow @click-left="onClickLeft" />
        </van-col>
        <van-col span="24" class="box1">
          <van-uploader v-model="fileList" multiple :max-count="1" />
          <p>请选择头像</p>
        </van-col>
        <van-col span="24">
          <van-field v-model="from.username" label="用户名" readonly />
          <van-field v-model="from.nickname" label="昵称" placeholder="修改昵称" />
          <van-field v-model="from.password" label="密码" placeholder="需要修改密码请输入" />
          <van-field v-model="from.mobile" type="tel" label="手机号" placeholder="修改手机号" />
          <van-field v-model="from.message" rows="2" autosize label="个性签名" type="textarea" maxlength="50" placeholder="请输入留言" show-word-limit />
        </van-col>
        <van-col span="24" class="button">
          <van-button round block type="info" @click="onModify">修改</van-button>
        </van-col>
      </van-row>
    </div>
  </div>
</template>
<script>
import { Toast } from 'vant'
export default {
  name,
  data() {
    return {
      fileList: [],
      user: {},
      from: {
        filePath: '',
        username: '',
        nickname: '',
        password: '',
        mobile: '',
        message: ''
      }
    }
  },
  mounted() {
    this.user = JSON.parse(this.$jsCookie.get('user'))
    this.onInquireUser()
  },
  methods: {
    onClickLeft() {
      this.$router.back()
    },
    // 修改用户信息
    onModify() {
      let form = {
        filePath: this.fileList[0].content,
        password: this.from.password,
        nickname: this.from.nickname,
        mobile: this.from.mobile
      }
      this.$post('auth/updateInfo', form)
        .then(result => {
          Toast.success('修改成功')
          this.$router.push('/user')
          location.reload() //刷新页面
        })
        .catch(err => {})
    },
    // 获取用户信息
    onInquireUser() {
      this.$get('auth/info')
        .then(result => {
          console.log(result)
          this.from.username = result.data.data.username
          this.from.nickname = result.data.data.nickname
          this.from.mobile = result.data.data.mobile
          this.fileList = result.data.data.avatar
        })
        .catch(err => {})
    }
  }
}
</script>
<style lang="less" scoped>
.box1 {
  margin-top: 0.3rem;
  text-align: center;
}
.van-cell {
  line-height: 0.5rem;
}
.button {
  padding: 0.2rem;
}
</style>
